import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { useTheme } from './theme/ThemeContext';
import { ThemedText } from './ThemedText';

interface FooterProps {
  leftComponent?: React.ReactNode;
  centerComponent?: React.ReactNode;
  rightComponent?: React.ReactNode;
}

export function Footer({ leftComponent, centerComponent, rightComponent }: FooterProps) {
  const { colors } = useTheme();

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: colors.background,
          borderTopColor: colors.border,
        },
      ]}
    >
      <View style={styles.section}>
        {leftComponent}
      </View>
      <View style={styles.section}>
        {centerComponent}
      </View>
      <View style={styles.section}>
        {rightComponent}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: Platform.OS === 'ios' ? 84 : 56,
    paddingBottom: Platform.OS === 'ios' ? 34 : 0,
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1,
    paddingHorizontal: 16,
  },
  section: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
}); 